<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background: #fff;
        }
        
        .test {
            position: relative;
            width: 100px;
            height: 100px;
        }
        
        .test span {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            font-size: 20px;
        }
        
        .test svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            stroke-dasharray: 1%, 300%;
            stroke-dashoffset: 0%;
            stroke: #ED6E5C;
            stroke-linecap: round;
            fill: none;
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }
        
        .test svg {
            animation: first1 3s linear infinite;
            -moz-animation: first1 3s linear infinite;
            -webkit-animation: first1 3s 0 linear infinite;
            -o-animation: first1 3s 0 linear infinite;
        }
        
        @-webkit-keyframes first1 {
            0% {
                stroke-dasharray: 0%, 250%;
                stroke-dashoffset: 0%;
            }
            50% {
                stroke-dasharray: 250%, 250%;
                stroke-dashoffset: 0%;
            }
            100% {
                stroke-dasharray: 250%, 250%;
                stroke-dashoffset: -250%;
            }
        }
        
        @-moz-keyframes first1 {
            0% {
                stroke-dasharray: 0%, 250%;
                stroke-dashoffset: 0%;
            }
            50% {
                stroke-dasharray: 250%, 250%;
                stroke-dashoffset: 0%;
            }
            100% {
                stroke-dasharray: 250%, 250%;
                stroke-dashoffset: -250%;
            }
        }
        
        @-o-keyframes first1 {
            0% {
                stroke-dasharray: 0%, 250%;
                stroke-dashoffset: 0%;
            }
            50% {
                stroke-dasharray: 250%, 250%;
                stroke-dashoffset: 0%;
            }
            100% {
                stroke-dasharray: 250%, 250%;
                stroke-dashoffset: -250%;
            }
        }
        
        @-keyframes first1 {
            0% {
                stroke-dasharray: 0%, 250%;
                stroke-dashoffset: 0%;
            }
            50% {
                stroke-dasharray: 250%, 250%;
                stroke-dashoffset: 0%;
            }
            100% {
                stroke-dasharray: 250%, 250%;
                stroke-dashoffset: -250%;
            }
        }
        /*
动画中
    stroke-dasharray:
    stroke-dashoffset:
    的值为 100/圆的半径
*/
    </style>
</head>

<body>
    <div class="test">
        <svg id="svgForStroke" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
            <circle cx="50%" cy="50%" r="40%" stroke-width="10%" />
        </svg>
    </div>
</body>

</html>